<template>
  <div class="login">
    
    <div v-if="isShow" id="loginDiv">
        <form>
            <h1 class="center aliceblue">登录</h1>
            <p class="text">账号:<input v-model="l_name" type="text"></p>
            <p class="text">密码:<input v-model="l_pwd" type="password"></p>
            <div style="text-align: center;margin-top: 30px;">
              <input @click="login" type="button" class="button" value="登录">
              <input @click="isShow=!isShow" type="reset" class="button" value="快速注册">
            </div>
        </form>
    </div>
    <div v-if="!isShow" id="loginDiv">
         <form action="">
             <h1 class="center aliceblue">注册</h1>
             <p class="text">用户账号:<input @keyup="handleUser" v-model="r_name" type="text" autofocus required></p>
             <p v-show="!isUseable" class="warning">用户名不能包含特殊符号！</p>
             <p class="text">用户密码:<input @keyup="handlePwd" v-model="r_pwd"  type="password" required></p>
             <p v-show="!isRight" class="warning">密码必须包含六位以上的数字和大小写英文</p>
             <p class="text">确认密码:<input @keyup="handleRepwd" v-model="r_repwd" type="password" required></p>
             <p v-show="!isSame" class="warning">两次输入的密码不正确！</p>
             <p></p>
             <p class="center mt30">
                <input @click="registe" class="button" type="button" value="注册">
                <input @click="isShow=!isShow" type="reset" class="button" value="返回登录">
             </p>
         </form>
     </div>

  </div>
</template>

<script>
export default {
  name:'Login',
  data() {
    return {
      isShow:true,
      l_name:'',
      l_pwd:'',
      r_name:'',
      r_pwd:'',
      r_repwd:'',
      isUseable:true,
      isRight:true,
      isSame:true
    }
  },
  methods:{
    handleUser(){
      var reg = /^[a-zA-Z\d]\w{1,19}[a-zA-Z\d]$/;
      this.isUseable = reg.test(this.r_name)
    },
    handlePwd(){
      const reg=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{6,16}$/;
      this.isRight = reg.test(this.r_pwd)
    },
    handleRepwd(){
      this.isSame = this.r_pwd == this.r_repwd
    },
    login(){
      
        this.$http.post('/user/dologin',{
          userName:this.l_name,
          pwd:this.l_pwd
        }).then(res=>{
          if(res.data.res){
            var login = JSON.stringify({name:this.l_name})
            localStorage.setItem('login',login)
            this.$router.go(-1)
            this.$bus.$emit('name')
          }else{
            alert(res.data.msg)
          }
        })
      
    },
    registe(){
      if(this.isUseable && this.isRight && this.isSame){
        this.$http.post('/user/doregister',{
          userName:this.r_name,
          pwd:this.r_pwd
        }).then(res=>{
          if(res.data.res){
            var login = JSON.stringify({name:this.r_name})
            localStorage.setItem('login',login)
            this.$router.go(-1)
            this.$bus.$emit('name')
          }else{
            alert(res.data.msg)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
    
  .login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  } 
    
  #loginDiv {
    width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background-color: rgba(145, 153, 170, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.9);
    border-radius: 10px;
  }
  .text {
    margin-top: 30px;
    margin-left: 20px;
    color: azure;
  }
     
  input {
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 180px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
  }
  .center{
    text-align: center;
    color: aliceblue;
  }
  .aliceblue{
    color: aliceblue;
  }
  .mt30{
    margin-top: 30px;
  }
  .button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
    cursor: pointer;
  }
  .warning{
    color: red;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 12px;
  }
</style>